<!doctype html>
<html lang="en">
	<head>
		<meta charset="utf-8" />

		<title>Multi Purpose Media Boxes</title>

		<!-- STYLE FOR THE PLUGIN -->

		<link rel="stylesheet" href="plugin/css/mediaBoxes.css" />

		<link href="assets/css/style.css" media="all" type="text/css" rel="stylesheet">

		<!-- scripts at bottom of page -->

		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<script type="text/javascript"></script>

	</head>
	<body>
		<div class="head">
			<div class="logo">
				<a href="#"><img src="assets/img/logo.png" alt="..." height="10"></a>
			</div>
		</div>
		<div class="container">
			<div id="grid">

				<!-- -------------------------- BOX MARKUP -------------------------- -->
				<div class="box" data-category="Category 1">
					<div class="box-image">
						<div data-thumbnail="img/dota.png"></div>
						<div data-image="img/dota.png"></div>

						<div class="thumbnail-caption">
							<div class="hover-lightbox open-lightbox"></div>
							<a href="#"><div class="hover-url"></div></a>
						</div>

						<div class="lightbox-text">
							Blur <span>In Category 1</span>
						</div>
					</div>
				</div>

				<!-- -------------------------- BOX MARKUP -------------------------- -->
				<div class="box">

					<div class="site-title">
						<img src="assets/img/logo.png" alt="" style="width:141px;" />

					</div>

				</div>
				<!-- -------------------------- BOX MARKUP -------------------------- -->
				<?php for ($i=0; $i < 50; $i++) { ?>
				<?php if ($i%7==0) { ?>
				<div class="box" data-category="Category 1">
					<div class="box-image">
						<div data-thumbnail="assets/img/thumbitem6.jpg"></div>
						<div data-image="assets/img/thumbitem6.jpg"></div>

						<div class="thumbnail-caption">
							<div class="hover-lightbox open-lightbox"></div>
							<a href="#"><div class="hover-url"></div></a>
						</div>

						<div class="lightbox-text">
							Architecture <span>In Category 3</span>
						</div>
					</div>
				</div>
				<?php } else if($i%6==0){ ?>
				<div class="box" data-category="Category 1">
					<div class="box-image">
						<div data-thumbnail="assets/img/thumbitem2.jpg"></div>
						<div data-image="assets/img/thumbitem2.jpg"></div>

						<div class="thumbnail-caption">
							<div class="hover-lightbox open-lightbox"></div>
							<a href="#"><div class="hover-url"></div></a>
						</div>

						<div class="lightbox-text">
							Architecture <span>In Category 3</span>
						</div>
					</div>
				</div>
				<?php } else if($i%5==0){ ?>
				<div class="box" data-category="Category 1">
					<div class="box-image">
						<div data-thumbnail="img/dota.png"></div>
						<div data-image="img/dota.png"></div>

						<div class="thumbnail-caption">
							<div class="hover-lightbox open-lightbox"></div>
							<a href="#"><div class="hover-url"></div></a>
						</div>

						<div class="lightbox-text">
							Architecture <span>In Category 3</span>
						</div>
					</div>
				</div>
				<?php } else if($i%4==0){ ?>
				<div class="box" data-category="Category 1">
					<div class="box-image">
						<div data-thumbnail="assets/img/thumbitem3.jpg"></div>
						<div data-image="assets/img/thumbitem3.jpg"></div>

						<div class="thumbnail-caption">
							<div class="hover-lightbox open-lightbox"></div>
							<a href="#"><div class="hover-url"></div></a>
						</div>

						<div class="lightbox-text">
							Architecture <span>In Category 3</span>
						</div>
					</div>
				</div>
				<?php } else if($i%3==0){ ?>
				<div class="box" data-category="Category 1">
					<div class="box-image">
						<div data-thumbnail="assets/img/thumbitem4.jpg"></div>
						<div data-image="assets/img/thumbitem4.jpg"></div>

						<div class="thumbnail-caption">
							<div class="hover-lightbox open-lightbox"></div>
							<a href="#"><div class="hover-url"></div></a>
						</div>

						<div class="lightbox-text">
							Architecture <span>In Category 3</span>
						</div>
					</div>
				</div>
				<?php } else if($i%2==0){ ?>
				<div class="box" data-category="Category 1">
					<div class="box-image">
						<div data-thumbnail="assets/img/thumbitem.jpg"></div>
						<div data-image="assets/img/thumbitem.jpg"></div>

						<div class="thumbnail-caption">
							<div class="hover-lightbox open-lightbox"></div>
							<a href="#"><div class="hover-url"></div></a>
						</div>

						<div class="lightbox-text">
							Architecture <span>In Category 3</span>
						</div>
					</div>
				</div>
				<?php } else{ ?>
				<div class="box" data-category="Category 1">
					<div class="box-image">
						<div data-thumbnail="assets/img/thumbitem7.jpg"></div>
						<div data-image="assets/img/thumbitem7.jpg"></div>

						<div class="thumbnail-caption">
							<div class="hover-lightbox open-lightbox"></div>
							<a href="#"><div class="hover-url"></div></a>
						</div>

						<div class="lightbox-text">
							Architecture <span>In Category 3</span>
						</div>
					</div>
				</div>
				<?php } ?>

				<?php } ?>

			</div>

		</div>
		<footer></footer>
		<!-- #container -->

		<!-- SCRIPTS FOR THE PLUGIN -->
		<script src="plugin/js/jquery-1.10.2.min.js"></script>
		<script src="plugin/js/rotate-patch.js"></script>
		<script src="plugin/js/waypoints.min.js"></script>
		<!-- if you wont use the Lazy Load feature erase this line -->
		<script src="plugin/js/mediaBoxes.min.js"></script>

		<script>
			$('document').ready(function() {

				//INITIALIZE THE PLUGIN
				$('#grid').grid({
					showFilterBar : true, //Show the navigation filter bar at the top
					imagesToLoad : 10, //The number of images to load when you click the load more button
					imagesToLoadStart : 20, //The number of images to load when it first loads the grid
					lazyLoad : false, //If you wish to load more images when it reach the bottom of the page
					isFitWidth : true, //Nedded to be true if you wish to center the gallery to its container
					horizontalSpaceBetweenThumbnails : 15, //The space between images horizontally
					verticalSpaceBetweenThumbnails : 15, //The space between images vertically
					columnWidth : 'auto', //The width of each columns, if you set it to 'auto' it will use the columns instead
					columns : 5, //The number of columns when you set columnWidth to 'auto'
					columnMinWidth : 220, //The minimum width of each columns when you set columnWidth to 'auto'
					isAnimated : true, //If you wish the gallery to have animated effects when resizing the grid
					caption : true, //Show the caption in mouse over
					captionType : 'grid', // 'grid', 'grid-fade', 'classic' the type of caption effect
					hoverImageIconsAnimation : true, // The animation of the Icons of the image
					hoverImageIconsSpeedAnimation : 100, // The speed of the animation of the Icons of the image
					lightBox : true, //Do you want the lightbox?
					lightboxKeyboardNav : true, //Keyboard navigation of the next and prev image
					lightBoxSpeedFx : 500, //The speed of the lightbox effects
					lightBoxZoomAnim : true, //Do you want the zoom effect of the images in the lightbox?
					lightBoxText : true, //If you wish to show the text in the lightbox
					lightboxPlayBtn : true, //Show the play button?
					lightBoxAutoPlay : false, //The first time you open the lightbox it start playing the images
					lightBoxPlayInterval : 4000, //The interval in the auto play mode
					lightBoxShowTimer : true, //If you wish to show the timer in auto play mode
					lightBoxStopPlayOnClose : false, //Do you want pause the auto play mode when you close the lightbox?
					allWord : "All", //The "All" word so you can translate it to another lenguaje
					loadMoreWord : "LOAD MORE ENTRIES", //The "Load More Entries" word so you can translate it to another lenguaje
				});
				$(".category-navbar").hide();
				$('.head').hide();
			});
			$(window).bind('scroll', function() {
				if ($(window).scrollTop() > 20) {
					$('.head').addClass('nempel')
					$('.head').show();
					//$('.hiddenmenu').addClass('show');
					//alert("jalan loh");
				} else {
					$('.head').removeClass('nempel');
					$('.head').hide();
					//$('.hiddenmenu').removeClass('show');
				}
			});

		</script>

	</body>
</html>